                <!-- Make a card view for projects -->
                <div class="mdl-card mdl-cell mdl-cell--4-col mdl-shadow--2dp project-card">
                    <div class="mdl-card__media mdl-color-text--grey-50" style="{{with .Params.cardthumbimage}}background: url('{{ . | relURL }}'); background-size: cover;{{end}}{{with .Params.cardbackground}}background-color:{{.}};{{end}}">
                        <div class="project-title"><a href="{{ .RelPermalink }}" {{ with .Params.cardtitlecolor }}style="color:{{.}};"{{end}}>{{ title .Title }}</a></div>
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ .RelPermalink }}">More Info</a>
                        <div class="mdl-layout-spacer"></div>
                        {{- with .Params.repo }}
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect icon-button" href="{{.}}" aria-label="Project Repository" title="Project Repository"><i class="material-icons_2x icon ion-social-github"></i></a>
                        {{- end }}
                        {{- with .Params.web }}
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect icon-button" href="{{.}}" aria-label="Project Website" title="Project Website"><i class="material-icons_2x icon ion-link"></i></a>
                        {{- end }}
                    </div>
                </div>
